<template>
  <!-- 点位管理 => 区域管理 -->
  <div>
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="24">
        <div class="header">
          <!--  -->
          <el-form :inline="true" label-width="100px">
            <el-form-item label="点位搜索：">
              <el-input v-model="PointName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="区域搜索：">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <!-- --------------------------------- -->
        </div>
      </el-col>
    </el-row>
    <!--  列表-->
    <el-row>
      <el-col :span="24">
        <div class="body">
          <el-button icon="el-icon-circle-plus-outline" @click="addClickFn()"
            >新建</el-button
          >
          <el-table
            :data="PointList.currentPageRecords"
            :header-cell-style="{ background: '#f3f6fb' }"
            style="width: 100%"
          >
            <el-table-column
              fixed
              type="index"
              :index="indexMethod"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column prop="name" label="点位名称"> </el-table-column>
            <el-table-column prop="region.name" label="所在区域" width="200">
            </el-table-column>
            <el-table-column
              prop="businessType.name"
              label="商圈类型"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="ownerName" label="合作商" width="180">
            </el-table-column>
            <el-table-column prop="addr" label="详细地址"> </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                  @click="lookFn(scope.row.id)"
                  type="primary"
                  >查看详情</el-link
                >
                <el-link
                  :underline="false"
                  @click="changeFn(scope.row.id)"
                  type="primary"
                  >修改</el-link
                >
                <el-link
                  :underline="false"
                  @click="delFn(scope.row.id)"
                  type="danger"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            next-text="下一页"
            prev-text="上一页"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-count="+PointList.totalPage"
            layout="total, slot, ->, prev, next"
          >
            <span class="page"
              >共{{ PointList.totalCount || 0 }}条记录 第 {{ pageIndex }}/{{
                PointList.totalPage
              }}页</span
            >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- form弹框 -->
    <el-dialog title="新增区域" :visible.sync="dialogFormVisible" width="630px">
      <el-form :rules="rules">
        <el-form-item label="点位名称：" label-width="120px" prop="text">
          <el-input
            type="text"
            placeholder="请输入"
            v-model="pointName"
            maxlength="15"
            show-word-limit
            style="width: 386px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="所在区域：" label-width="120px" prop="areaCloose">
          <el-select v-model="areaValue[0]" placeholder="请选择" style="width: 386px">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="[item.label,item.value]"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="所在商圈："  label-width="120px"  prop="businessCloose">
          <el-select v-model="businessValue[0]" placeholder="请选择" style="width: 386px">
            <el-option
              v-for="(item, index) in options1"
              :key="index"
              :label="item.label"
              :value="[item.label,item.value]"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="归属合作商："  label-width="120px"  prop="PartnerCloose">
          <el-select v-model="ownerValue[0]" placeholder="请选择" style="width: 386px">
            <el-option
              v-for="(item, index) in options2"
              :key="index"
              :label="item.label"
              :value="[item.label,item.value]"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址：" label-width="120px" prop="cooperativeCloose">
          <el-cascader
            style="width: 386px"
            size="large"
            :options="option"
            v-model="selectedOptions"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label-width="120px" prop="textarea">
          <el-input
            type="textarea"
            placeholder="请输入备注（不超过40字）"
            v-model="remark"
            maxlength="60"
            :rows="3"
            show-word-limit
            style="width: 386px"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickFn()">取 消</el-button>
        <template v-if="arrOpinion === 'change'">
          <el-button type="primary" @click="changePoint()">确 定</el-button>
        </template>
        <template v-if="arrOpinion === 'add'">
          <el-button type="primary" @click="addPoint()">确 定</el-button>
        </template>
      </div>
    </el-dialog>
    <!-- table 弹框 查看详情 -->
    <el-dialog
      title="点位详情"
      :visible.sync="dialogTableVisible"
      width="696px"
    >
      <el-table
        :data="detailsList"
        :header-cell-style="{ background: '#f3f6fb' }"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          property="innerCode"
          label="机器编号"
        ></el-table-column>
        <el-table-column
        property="vmStatus"
        label="设备状态">
        </el-table-column>
        <el-table-column
          property="lastSupplyTime"
          label="最后一次供货时间"
          width="200"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
/* 省市区联动 */
import { regionData, CodeToText } from 'element-china-area-data'
import { getSearch } from '@/api/other'
import { pointList, getPoint, delPoint, addPoint, changePoint } from '@/api/point'
export default {
  data () {
    return {
      /* 查询条件 */
      options: [],
      PointName: '',
      value: '',
      /* 新建de选择器 */
      options1: [],
      options2: [],
      area: '',
      option: regionData,
      selectedOptions: [],
      areaValue: [],
      businessValue: [],
      ownerValue: [],

      /* 当前页 */
      pageIndex: 1,
      /* 当前页数量 */
      pageSize: 10,
      /* 区域数据 */
      PointList: {},
      /* 详情数据 */
      detailsList: [],
      name: '',
      /* form弹框 */
      dialogFormVisible: false,
      /* table弹框 */
      dialogTableVisible: false,
      /* 判断是请求类型 */
      arr: ['add', 'change'],
      arrOpinion: '',
      /* form表单数据 */

      pointName: '',
      remark: '',
      /* 效验规则 */
      rules: {
        text: [{ required: true, message: '请输入', trigger: 'blur' }],
        textarea: [{ required: true, message: '请输入', trigger: 'blur' }],
        areaCloose: [{ required: true, message: '请输入', trigger: 'blur' }],
        cooperativeCloose: [{ required: true, message: '请输入', trigger: 'blur' }],
        PartnerCloose: [{ required: true, message: '请输入', trigger: 'blur' }],
        businessCloose: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      id: ''

    }
  },
  methods: {
    /* 查询 */
    async onSubmit () {
      // console.log(this.formInline.reigionName)
      await this.axiosFn()
      this.PointName = ''
      this.value = ''
    },
    /* --------------------------- */
    /* 分页 */
    handleCurrentChange (val) {
      this.pageIndex = val
      this.axiosFn()
    },
    /* --------------------- */
    /* 页面请求数据 */
    async axiosFn () {
      const res = await pointList({
        pageIndex: this.pageIndex,
        pageSize: 10,
        name: this.PointName,
        regionId: this.value
      })
      // console.log(res)
      res.currentPageRecords.forEach((item) => {
        const addr = item.addr.split('-')
        item.addr = addr[addr.length - 1]
      })

      this.PointList = res
    },
    /* 新增区域 */
    async addPoint () {
      this.dialogFormVisible = false
      console.log(this.ownerValue[0])
      await addPoint({
        addr: this.area + '-' + this.remark,
        areaCode: this.selectedOptions[2],
        businessId: this.businessValue[0][1],
        createUserId: 1,
        name: this.pointName,
        ownerId: this.ownerValue[0][1],
        ownerName: this.ownerValue[0][0],
        regionId: this.areaValue[0][1]
      })
      // console.log(this.selectedOptions)
      this.axiosFn()
      this.pointName = ''
      this.remark = ''
      this.areaValue = []
      this.businessValue = []
      this.ownerValue = []
      this.selectedOptions = []
    },
    addClickFn () {
      this.dialogFormVisible = true
      this.arrOpinion = this.arr[0]
      this.pointName = ''
      this.remark = ''
      this.areaValue = []
      this.businessValue = []
      this.ownerValue = []
      this.selectedOptions = []
    },
    /* -------------------------- */
    /* 删除区域 */
    async delFn (id) {
      // console.log(id)
      await delPoint(id)
      this.axiosFn()
    },
    /* -------------------------- */
    /*  查看详情 */
    async lookFn (id) {
      this.dialogTableVisible = true
      // console.log(id)
      const res = await getPoint(id)
      // console.log(res)
      res.forEach((item) => {
        const arr = ['未投放', '运营', '', '撤机']
        item.vmStatus = arr[item.vmStatus]
      })
      this.detailsList = res
      // this.name = res.currentPageRecords[0].region.name
    },
    /* ------------------------- */
    /* 修改区域 */
    async changeFn (id) {
      const res = await await getSearch({
        pageIndex: 1,
        pageSize: 1000
      })
      // console.log(res)
      // console.log(id)
      const obj = res.currentPageRecords.find(item => item.id === id)
      // console.log(obj)
      this.dialogFormVisible = true
      this.arrOpinion = this.arr[1]
      this.id = id
      this.pointName = obj.name
      const arr = obj.addr.split('-')
      arr.pop()
      this.area = arr.join('-')
      this.remark = obj.addr.split('-')[obj.addr.split('-').length - 1]
      this.areaValue = [obj.region.name, obj.region.id]
      this.businessValue = [obj.businessType.name, obj.businessType.id]
      this.ownerValue = [obj.ownerName, obj.ownerId]
      this.selectedOptions = [((obj.areaCode + '').substring(0, 2) + '0000'), ((obj.areaCode + '').substring(0, 4) + '00'), obj.areaCode]
      // console.log(this.selectedOptions)
    },
    async changePoint () {
      this.dialogFormVisible = false
      await changePoint(this.id, {
        addr: this.area + '-' + this.remark,
        areaCode: +this.selectedOptions[2],
        businessId: this.businessValue[1],
        createUserId: 1,
        name: this.pointName,
        ownerId: this.ownerValue[1],
        ownerName: this.ownerValue[0],
        regionId: this.areaValue[1]
      })
      this.axiosFn()
    },
    /* -------------------------- */
    /* 取消按钮 */
    clickFn () {
      this.dialogFormVisible = false
      this.regionName = ''
      this.remark = ''
    },
    /* -------------------- */
    /* 序号 */
    indexMethod (index) {
      return index + 1 + 10 * (this.pageIndex - 1)
    },
    handleChange (value) {
      // console.log(value)
      this.getCodeToText(null, value)
    },
    getCodeToText (codeStr, codeArray) {
      if (codeStr === null && codeArray === null) {
        return null
      } else if (codeArray === null) {
        codeArray = codeStr.split(',')
      }
      let area = ''
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]]
          break
        case 2:
          area += CodeToText[codeArray[0]] + '-' + CodeToText[codeArray[1]]
          break
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            '-' +
            CodeToText[codeArray[1]] +
            '-' +
            CodeToText[codeArray[2]]
          break
        default:
          break
      }
      // console.log(area)
      this.area = area
      return area
    }
  },

  async created () {
    this.axiosFn()
    const res = await getSearch({
      pageIndex: 1,
      pageSize: 1000
    })
    // console.log(res)
    let arr = []
    res.currentPageRecords.forEach((item) => {
      if (arr.indexOf(item.region.name) === -1) {
        arr.push(item.region.name)
        this.options.push({ label: item.region.name, value: item.region.id })
      }
    })
    /* 商圈 */
    arr = []
    res.currentPageRecords.forEach((item) => {
      if (arr.indexOf(item.businessType.name) === -1) {
        arr.push(item.businessType.name)
        this.options1.push({
          label: item.businessType.name,
          value: item.businessType.id
        })
      }
    })
    /* 合作商 */
    arr = []
    res.currentPageRecords.forEach((item) => {
      if (arr.indexOf(item.ownerName) === -1) {
        arr.push(item.ownerName)
        this.options2.push({ label: item.ownerName, value: item.ownerId })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  display: flex;
  width: 1000vh;
  height: 64px;
  align-items: center;
  margin-bottom: 25px;
  padding-left: 17px;

  .el-form-item {
    margin-bottom: 0px;
  }
  .el-button {
    min-width: 80px;
    height: 36px;
    padding: 0;
    background-color: #5f84ff;
    border: none;
  }
  ::v-deep .el-input__inner {
    height: 36px;
  }
}
.body {
  width: 100%;
  background-color: #fff;
  padding-left: 30px;
  padding: 18px 16px;
  ::v-deep .el-table {
    box-sizing: border-box;
    max-width: 100%;
    background-color: #fff;
    font-size: 15px;
    font-weight: 400;
    color: #606266;
    border: 0px;
    .el-link--inner {
      margin-right: 10px;
      font-size: 16px;
    }
  }
  .el-button {
    width: 80px;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
    color: #fff;
    margin-bottom: 10px;
  }
  .page {
    height: 28px;
    line-height: 28px;
    font-size: 15px !important;
    color: #dbdfe5 !important;
    font-weight: 400;
    margin: 25px 10px;
  }
  ::v-deep .btn-next,
  ::v-deep .btn-prev {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    margin: 20px 14px;
  }
}
/* 弹框 */
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px 30px;
}
/* table 弹框 */
.dialogBottom {
  padding-left: 30px;
  font-size: 15px;
}
.dialogTop {
  padding-left: 30px;
  font-size: 15px;
  margin-bottom: 35px;
}
.el-cascader-menu{
  height: 200px!important;
}
</style>>
